<script setup lang="ts">
import { routes } from '@/router'
</script>
<template>
  <div class="main">
    <RouterLink
      v-for="item in routes"
      class="link"
      active-class="active"
      :to="item.path"
      :key="item.path"
      >{{ item.name }}</RouterLink
    >
  </div>
  <RouterView />
</template>
<style lang="scss" scoped>
.main {
  display: flex;
  gap: 16px;
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-color);
}
.link {
  color: inherit;
}
.active {
  color: var(--primary-color);
}
</style>
